<script setup>
// TODO: 编辑
import { ref } from 'vue'
import axios from 'axios'
// 弹框开关
const dialogVisible = ref(false)

//定义open方法同时暴露给父组件进行调用

const formData = ref({
  id: '',
  name: '',
  place: ''
})

const open=(row)=>{
    console.log("父组件传入的row数据为：",row)
    formData.value.id = row.id
    formData.value.name = row.name
    formData.value.place = row.place


  // 打开弹框
  dialogVisible.value = true
  // console.log("打开编辑弹框")
}
// 子组件暴露给父组件的函数方法，便于在父组件中进行函数触发
defineExpose({
  open
})


//父组件暴露给子组件的函数方法，提供给子组件调用
const emit = defineEmits(['on-update'])

// 确认按钮所需绑定的修改函数


const onUpdate= async ()=>{
  console.log("点击了确认按钮，修改数据的id值为：",formData.value.id)
  //调用修改方法
  await axios.patch(`/edit/${formData.value.id}`, {
  name: formData.value.name,
  place: formData.value.place,   
})

//关闭编辑弹窗
   dialogVisible.value=false
  
  //通知父组件回查询接口
  emit('on-update')

}

</script>

<template>
  <el-dialog v-model="dialogVisible" title="编辑" width="400px">
    <el-form label-width="50px">
      <el-form-item label="姓名">
        <el-input placeholder="请输入姓名" v-model="formData.name"/>
      </el-form-item>
      <el-form-item label="籍贯">
        <el-input placeholder="请输入籍贯" v-model="formData.place" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onUpdate">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-input {
  width: 290px;
}
</style>
